import { Link, Outlet, useLocation } from 'umi';
import { Layout, Menu, Button, Typography } from 'antd';
import { MessageOutlined, SettingOutlined, AppstoreOutlined } from '@ant-design/icons';
import './index.less';

const { Header, Sider, Content } = Layout;
const { Title } = Typography;

export default function AppLayout() {
  const location = useLocation();
  
  const menuItems = [
    {
      key: '/',
      icon: <MessageOutlined />,
      label: <Link to="/">聊天</Link>,
    },
    {
      key: '/models',
      icon: <AppstoreOutlined />,
      label: <Link to="/models">模型</Link>,
    },
    {
      key: '/settings',
      icon: <SettingOutlined />,
      label: <Link to="/settings">设置</Link>,
    },
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider theme="light" width={250} style={{ boxShadow: '0 0 10px rgba(0,0,0,0.05)' }}>
        <div style={{ padding: '20px 16px', borderBottom: '1px solid #f0f0f0' }}>
          <Title level={3} style={{ margin: 0, color: '#10a37f' }}>AI 聊天</Title>
        </div>
        <Menu
          mode="inline"
          selectedKeys={[location.pathname]}
          style={{ height: '100%', borderRight: 0 }}
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Content style={{ padding: '24px', backgroundColor: '#fff' }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}
